<template>
	<section id="redPacket">
		<!-- 金额框 -->
		<div class="redPacket_top">
			<div class="redPacket_top_title">
				<span class="redPacket_top_titleText">{{title}}</span>
				<span class="redPacket_top_titleSet">{{setting}}</span>
			</div>
			<div class="redPacket_top_money">
				<span class="redPacket_top_moneySpan">
					{{menoy}}元
					<img src="@/asserts/images/arrowsImg.png" class="arrowsImg"/>
				</span>
			</div>
			<div class="redPacket_top_exchange">
				<div class="redPacket_top_exchangeBox">
					<div class="redPacket_top_exchangeBoxLeft">
						<img :src="goldMessage.goldImg" class="redPacket_top_exchangeBoxRightImg"/>
						<span class="redPacket_top_exchangeBoxRightText">{{goldMessage.goldText}}:{{goldMessage.goldSum}}</span>
						<span class="redPacket_top_exchangeBoxRightButton" @click="messageHint()">{{goldMessage.goldButton}}</span>
						<div style="clear:both"></div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- banner区 @click="clickoverlay()"-->
		<div class="redPacket_banner">
			 <van-swipe :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="(itembanner,index) in images" :key="index">
					<img :src="itembanner.img" @click="jumpLogin()"/>
				</van-swipe-item>
			</van-swipe>
		</div>
		
		<div class="redPacket_newTask">
			<p class="redPacket_newTaskTitle">{{redPacket_newTaskTitle}}</p>
			<div class="redPacket_newTaskList" v-for="(item,index) in redPacketList" :key="index">
				<div class="redPacket_newTaskList_text">
					<img :src="item.Img" class="redPacket_newTaskList_text_img"/>
					<div class="redPacket_newTaskList_text_main">
						<p class="redPacket_newTaskList_text_mainTitle">{{item.mainTitle}}<span>{{item.mainTextSpan}}</span></p>
						<p class="redPacket_newTaskList_text_mainText">{{item.mainText}}</p>
					</div>
				</div>
				<span class="redPacket_newTaskList_button" @click="jumpLogin()">{{item.button}}</span>
			</div>
		</div>
		
		<!-- 日常任务 -->
		<div class="redPacket_newTask">
			<p class="redPacket_newTaskTitle">{{dailyTitle}}</p>
			<div class="redPacket_newTaskList" v-for="(item,index) in dailyList" :key="index">
				<div class="redPacket_newTaskList_text">
					<img :src="item.Img" class="redPacket_newTaskList_text_img"/>
					<div class="redPacket_newTaskList_text_main">
						<p class="redPacket_newTaskList_text_mainTitle">{{item.mainTitle}}<span>{{item.mainTextSpan}}</span></p>
						<p class="redPacket_newTaskList_text_mainText">{{item.mainText}}</p>
					</div>
				</div>
				<span class="redPacket_newTaskList_button" @click="jumpLogin()">{{item.button}}</span>
			</div>
		</div>
		
		<p class="redFooter">
			如有疑问请参考
			<a href="javascript:;" @click="rules()">活动规则</a>
		</p>
		
		<!-- 右侧登陆弹层 -->
		<van-popup v-model="show" position="right" :overlay="false">
			<div class="LayerThickness">
				<div class="LayerClose">
					<img :src="closeImg" @click="closeoverlay()"/>
					<span>登陆</span>
				</div>
				<div class="LayerLogin">
					<form action="" class="login-from">
						<p>
							<input type="text" placeholder=" 请输入用户名" name="loginName" v-model="loginName" class="login-name"/>
						</p>
						<p>
							<input type="password" placeholder=" 请输入密码" name="password" v-model="password" class="login-pass"/>
						</p>
						<p>
							<button type="button" class="login-button" @click="sendLogin()">登录</button>
						</p>
						<p class="forgetDiv">
							<span>忘记密码</span>
							<span>注册账号</span>
						</p>
					</form>
				</div>
				
			</div>
		</van-popup>
	</section>
</template>

<script>
	// import redPacketTask from '@/containers/redPacket/redPacketTask.vue'
	export default {
		data() {
			return {
				title:'现金金额',
				setting:'设置',
				menoy:'0.00',
				goldMessage:{
					goldImg:'../asserts/images/moneyIcon.png',
					goldText:'金币',
					goldSum:'0',
					goldButton:'兑换'
				},
				images:[
					{
						img:'../asserts/images/banner01.jpg'
					},
					{
						img:'../asserts/images/banner02.jpg'
					}
				],
				show: false,
				closeImg:'../asserts/images/close.png',
				loginName:'',
				password:'',
				redPacket_newTaskTitle:'新手任务',
				dailyTitle:'日常任务',
				redPacketList:[
					{
						Img:'../asserts/images/paperImg.png',
						mainTitle:'新用户1元见面礼',
						mainTextSpan:'',
						mainText:'点击领取1元现金红包',
						button:'领1元现金'
					},
					{
						Img:'../asserts/images/gift.png',
						mainTitle:'新人尝鲜',
						mainTextSpan:'+1元',
						mainText:'认真阅读3篇文章',
						button:'阅读'
					}
				],
				dailyList:[
					{
						Img:'../asserts/images/paperImg.png',
						mainTitle:'邀请好友',
						mainTextSpan:'',
						mainText:'再邀请一个好友，加送奖励20元',
						button:'领25元现金'
					},
					{
						Img:'../asserts/images/paperImg.png',
						mainTitle:'签到',
						mainTextSpan:'+30金币',
						mainText:'您已连续签到0天',
						button:'签到'
					},
					{
						Img:'../asserts/images/paperImg.png',
						mainTitle:'认真阅读文章或视频',
						mainTextSpan:'',
						mainText:'每次奖励30金币，每天10次',
						button:'领30金币'
					},
					{
						Img:'../asserts/images/paperImg.png',
						mainTitle:'好友阅读奖励',
						mainTextSpan:'',
						mainText:'好友阅读文章，你拿60金币',
						button:'领60金币'
					},
					{
						Img:'../asserts/images/paperImg.png',
						mainTitle:'好友阅读奖励',
						mainTextSpan:'',
						mainText:'好友阅读文章，你拿60金币',
						button:'领60金币'
					},
					{
						Img:'../asserts/images/paperImg.png',
						mainTitle:'晒收入',
						mainTextSpan:'',
						mainText:'每次奖励60金币，每天3次',
						button:'领60金币'
					},
					{
						Img:'../asserts/images/paperImg.png',
						mainTitle:'阅读推送文章',
						mainTextSpan:'',
						mainText:'不定期推送，每次点击奖励30金币',
						button:'查看示例'
					}
				]
			};
		},
		components: {
			// redPacketTask
		},
		methods: {
			// 兑换文字提示
			messageHint:function(){
				this.$toast('金币将于每天凌晨自动换成现金哦~');
			},
			
			// 点击登陆时判断是否为空，如果都不为空的话就进行ajax请求把信息传给后台，把拿到的信息存储到本地，然后天赚到首页
			
			// 进入未登录页面的时候要执行一个js首先判断本地存储中是否有用户信息，没有就跳到登录页，如果有就直接把信息拿出来填在页面上
			sendLogin:function(){
				if(this.loginName==''){
					alert('请输入用户名')
				}else if(this.password==''){
					alert('请输入密码')
				}else{
					alert('登陆成功')
				}
			},
			
			// 未登录状态下点击任何按钮都是弹出登陆页
			jumpLogin:function(){
				if(window.sessionStorage.userInfo){
						// 把这个信息转一下 转成json格式
						var uObj=JSON.parse(window.sessionStorage.userInfo);
						this.$http.get('/userinfo',{
// 							params:{
// 								uId:uObj.user_id
// 							}
 						}).then((res)=>{
							this.getInfo = res.data;
						})
				}else{
					// this.$router.push('/login')
					this.show=true
				}
			},
			// 关闭登陆弹层
			closeoverlay:function(){
				this.show=false
			},
			
			// 活动规则页
			rules:function(){
				this.$router.push('/rules')
			}
			
		},
		mounted() {
		},
		computed: {

		}
	};
</script>
<style scoped lang="scss">
	@import "@/asserts/styles/redPacket/redPacket.scss";
</style>
